<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="App">
        Welcome<br /><input id="text" type="text" />
        <button>发送消息</button>
        <hr />
        <button>关闭WebSocket连接</button>
        <hr />
        <div id="message" class="test"></div>
    </div>
</body>
<!-- <script type="text/javascript">

    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://192.168.101.102:8080/websocket");
    }
    else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

</script> -->
<script src="/JG/Content/vue-v2.34.js"></script>
<script type="text/javascript">
    var Vue = new Vue({
        el: "#App",
        data: {
            websocket: null
        },
        mounted: function () {
            this.initWebpack();
        },
        // created() {
        //     this.initWebSocket();
        // },
        destroyed() {
            this.websocket.close() //离开路由之后断开websocket连接
        },
        methods: {
            initWebpack() {//初始化websocket
                const wsuri = "ws://192.168.101.102:8080/websocket";
                this.websocket = new WebSocket(wsuri);//这里面的this都指向vue
                this.websocket.onopen = this.websocketopen;
                this.websocket.onmessage = this.websocketonmessage;
                this.websocket.onclose = this.websocketclose;
                this.websocket.onerror = this.websocketerror;
            },
            websocketopen() {//打开
                console.log("WebSocket连接成功")
            },
            websocketonmessage(e) { //数据接收
                console.log(e)
                this.productinfos = JSON.parse(e.data);
            },
            websocketclose() {  //关闭
                console.log("WebSocket关闭");
            },
            websocketerror() {  //失败
                console.log("WebSocket连接失败");
            },

        }
    })
</script>

</html>